<template>
	<div class="change">
		<div class="updatepic" v-show="type==1">
			<div class="head">
				<h4>热度图片添加-修改</h4>
				<router-link to="/admin/hotpic">返回列表</router-link>
				<button v-on:click="Add()" v-show="act==0" >保存</button>
			</div>
			<div class="line"></div>
		</div>
		<div class="updategood" v-show="type==2">
			<div class="head">
				<h4>商品添加-修改</h4>
				<router-link to="/admin/hotpic">返回列表</router-link>
				<button v-on:click="Add()" v-show="act==0">保存</button>
			</div>
			<div class="line"></div>
			<div class="body">
				<aside class="pic">
					<!-- 头像更换 -->
					<img :src="`http://127.0.0.1/api/public/showimg/${booklist.pic}`"
						style="height: 200px;width: 180px;">
				</aside>
				<aside class="text">
					<p>商品名称
						<input type="text" v-model="booklist.name">
					</p>
					<p>商品序号
						<input type="number" v-model="booklist.sn">
					</p>
					<p>商品价格
						<input type="number" v-model="booklist.price">
					</p>
					<p>商品厂商
						<input type="text" v-model="booklist.maker">
					</p>
					<p>书籍作者
						<input type="text" v-model="booklist.author">
					</p>
					<p>出厂时间
						<input type="date" v-model="booklist.tmake">
					</p>
					<p>商品库存
						<input type="number" v-model="booklist.salenum">
					</p>
					<p>商品类型
						<input type="text" v-model="booklist.stock">
					</p>
					<p>描述
						<textarea name="txt" v-model="booklist.info" value="miaoshu" rows="5" cols="22"></textarea>
					</p>
				</aside>
			</div>
		</div>
	</div>
 
</template>

<script>
	export default {
		name: 'UpdateList',
		data() {
			return {
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
				id: this.$route.params.bookid,
				Updatelist: [],
				booklist: [],
				book: {},
				type: 2,
				act: 0
			}
		},
		computed: {},
		methods: {
			findbookList() {
				this.$get(`/api/adm/book/findById/${this.id}`).then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data);
					this.booklist = resp.data.data;
					console.log(this.booklist);
				})
			},
			Add() {
				let fd = new FormData();
				if(this.booklist.id!=0){
					fd.append("name", this.booklist.id);
				}else{
					fd.append("name", 0);
				}
				fd.append("name", this.booklist.name);
				fd.append("price", this.booklist.price);
				fd.append("maker", this.booklist.price);
				fd.append("tmake", this.booklist.price);
				fd.append("typeid", this.booklist.price);
				fd.append("pic", this.booklist.pri);
				fd.append("author", this.booklist.author);
				fd.append("salenum", this.booklist.salenum);
				fd.append("stock", this.booklist.stock);
				fd.append("info", this.booklist.info);
				let content = this.$refs.imgx.files[0];
				fd.append("pic", content);
				this.$post("/api/adm/book/add/", fd)
					.then((resp) => {
						this.booklist = resp.data.data;
						console.log(resp.data);
					})
			}
		},
		mounted() {
			this.findbookList();
			console.log(this.id);
		}
	}
</script>

<style scoped>
	a {
		color: #000000;
	}

	button {
		background: none;
		border: none;
	}

	.head {
		display: flex;
		justify-content: space-between;
	}

	.line {
		border: #409eff 1px solid;
		width: 100%;
		margin-bottom: 10px;
	}

	.body {
		display: flex;
		justify-content: space-between;
	}

	.text {
		margin-top: 30px;
		margin: 20px auto;
		line-height: 50px;
		text-align: right;
	}

	.pic {
		margin-top: 30px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 250px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>